import React from 'react';

import View from 'lib/View.jsx';
import dispatcher from 'lib/dispatcher';
import Loading from 'lib/components/Loading.jsx';
import ConditionView from 'lib/components/ConditionView.jsx';

export default class MainView extends Loading {
  addConditionHandler() {
    dispatcher.dispatch({
      $type: 'init_filter'
    });
  } // addConditionHandler

  renderBody(data) {
    let list = data.toJS();
    let mainBodyStyle = {
      paddingTop: '43px',
      paddingBottom: '17px'
    };

    let hasCondition = this.props.filterConditions !== null;
    return (
      <div className="auto-row" style={{ marginTop: 15 }}>
        <div className="left">过滤条件</div>
        <div className="main" style={ hasCondition ? mainBodyStyle : {} }>
          {
            hasCondition ? (
              <ConditionView
                options={ list }
                { ...this.props.filterConditions } />
            ) : (
              <div
                className="iconfont condition-add"
                onClick={ this.addConditionHandler.bind(this) }>
                &#xe6bd;
              </div>
            )
          }
        </div>
      </div>
    );
  } // renderBody
}

MainView.defaultProps = {
  store: {},
  filterConditions: null
}
